<template>
  <div class="console">
    <el-form class="password-form" ref="form" :model="myInfo" label-width="120px">
      <el-form-item label="用户名:">
        <!-- <span class="val" v-if="!myInfo.usernameEdit">{{ myInfo.username }}<i class="el-icon-edit-outline alick-btn-edit" @click="toEdtit('usernameEdit')" /></span> -->
        <el-input type="text" v-model="myInfo.username" class="short">
          <!-- <template slot="append">
            <div class="btn-box">
              <a href="javascript:;">取消</a>
              <span>|</span>
              <a href="javascript:;">保存</a>
            </div>
          </template> -->
        </el-input>
      </el-form-item>
      <el-form-item label="昵称:">
        <el-input type="text" v-model="myInfo.nick_name" class="short" />
      </el-form-item>
      <el-form-item label="电话:">
        <el-input type="text" v-model="myInfo.phone" class="short" />
      </el-form-item>
      <el-form-item label="机构:">
        <el-input type="text" v-model="myInfo.organization_name" class="short" :readonly="true" :disabled="true"/>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="this.updUserPhone">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import {  putUser } from '@/api/user'

export default {
  data() {
    return {
      myInfo:{}
      //  detailData: {}
    };
  },
  async created() {
    if (this.$isFirstPage) {
        Vue.prototype.$isFirstPage = false;
    }
    this.myInfo = await this.$myInfo(this)
      console.log(2,this.myInfo)
  },

  async mounted() {

  },
  destroyed() {

  },

  methods: {
    toEdtit(str){
      this.myInfo[str] = true
      this.myInfo = JSON.parse(JSON.stringify(this.myInfo))
      console.log(this.myInfo)
    },
    async updUserPhone(){
      this.myInfo = JSON.parse(JSON.stringify(this.myInfo))
      let ret = await putUser({
        id:this.myInfo.id,
        phone:this.myInfo.phone,
        nick_name:this.myInfo.nick_name
      })
      if(ret.code == '200'){
        this.$message({
          showClose: true,
          message: '用户信息修改成功',
          type: 'success'
        });
      }else{
        this.$message({
          showClose: true,
          message: '修改用户信息异常',
          type: 'error'
        });
      }
      console.log(this.myInfo,ret)
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
.password-form {
  margin: 16px 0;
}
.btn-box{
  width: 60px;
  span{
    color: #999;
  }
  a{
    font-size: 12px;
    padding: 0 4px;
    color: #409eff;
  }
}
.short{
  max-width: 360px;
}
</style>
